<!DOCTYPE html>
<meta charset="UTF-8">
<title>tooltip</title>
<link rel="import" href="../../common/layout.html">

<main ng-app="app" ng-controller="appCtrl as app">
	<input type="text" ng-model="tip" tooltip="tip" tooltip-trigger="click" tooltip-append-to-body="true">

	<button type="button" cc-tooltip="'<span ng-click=\'app.click($event)\'>hello world hello world hello world hello world hello world hello world</span>'"
			tooltip-append-to-body="true"
			tooltip-compilable="true"
			tooltip-close-delay="2000" style="margin-top: 50px">hover normal tooltip
	</button>

	<button type="button" cc-tooltip="'hello world'" tooltip-type="error-minor" style="margin-top: 50px">hover error tooltip
	</button>
	<button type="button" cc-tooltip="'hello world'" tooltip-type="error-minor" tooltip-placement="bottom-right" style="margin-top: 50px">hover error tooltip bottom-right
	</button>
	<button type="button" cc-tooltip="'hello world'" tooltip-type="error-minor" tooltip-placement="right" style="margin-top: 50px">hover error tooltip right
	</button>
	<button type="button" cc-tooltip="'hello world'" tooltip-type="error-minor" tooltip-placement="left" style="margin-top: 50px">hover error tooltip left
	</button>

	<button type="button" cc-tooltip="'click me mdzz'" tooltip-trigger="click">click toggle tooltip</button>
	<button type="button" cc-tooltip="'click me mdzzclick me mdzzclick me mdzzclick me mdzzclick me mdzzclick me mdzz'" tooltip-trigger="click">click toggle tooltip</button>


	<div>
		<a href="#" cc-tooltip="'啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊'" tooltip-append-to-body="true">详情</a>
	</div>
	<div>
		<a href="#" cc-tooltip="'不要不要不要不要不要不要不要不要不要不要不要不要'" tooltip-append-to-body="true">详情1</a>
	</div>

	<div>
		<a href="#"  tooltip-style="app.style" cc-tooltip="app.template" tooltip-compilable="true" tooltip-append-to-body="true">详情2</a>
	</div>

	<button type="button" cc-tooltip="'hello world xxxx'" tooltip-placement="top" tooltip-opened="app.opened" ng-click="app.opened=!app.opened">toggle tooltip manual top
	</button>
	<button type="button" cc-tooltip="'hello world'" tooltip-placement="top-left" tooltip-opened="app.opened">tooltip top-left
	</button>
	<button type="button" cc-tooltip="'hello world'" tooltip-placement="top-right" tooltip-opened="app.opened">tooltip top-right
	</button>
	<button type="button" cc-tooltip="'hello world'" tooltip-placement="bottom" tooltip-opened="app.opened">tooltip bottom
	</button>
	<button type="button" cc-tooltip="'hello world'" tooltip-placement="bottom-left" tooltip-opened="app.opened">tooltip bottom-left
	</button>
	<button type="button" cc-tooltip="'hello world'" tooltip-placement="bottom-right" tooltip-opened="app.opened">tooltip bottom-right
	</button>
	<button type="button" cc-tooltip="'hello world'" tooltip-placement="left" tooltip-opened="app.opened">tooltip left
	</button>
	<button type="button" cc-tooltip="'hello world'" tooltip-placement="right" tooltip-opened="app.opened">tooltip right
	</button>
</main>

<script src="/components.js"></script>
<script src="index.js"></script>

